import React, {useContext} from 'react';

import styles from './styles.module.less';
import {Button, Card, Col, Divider, Row, Table,Badge} from "antd";
import {CheckOutlined, MinusOutlined} from "@ant-design/icons";
import {PublicDataStore} from "@src/store/PublicData/Provider";
import { useTranslation } from 'react-i18next';


const Member = () => {
    const { t, i18n } = useTranslation();
    const {state } = useContext(PublicDataStore);

    const dataSource = [
        {
            key: '1',
            name: t('Personal Data'),
            free: <CheckOutlined className={styles.rightIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '2',
            name: t('Add company information'),
            free: <CheckOutlined className={styles.rightIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '3',
            name: t('Add Data Center'),
            free: <CheckOutlined className={styles.rightIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '4',
            name: t('Adding Nodes'),
            free: <CheckOutlined className={styles.rightIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '5',
            name: t('Review Supplier'),
            free: <CheckOutlined className={styles.rightIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '6',
            name: t('Price Estimation'),
            free: <CheckOutlined className={styles.rightIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '7',
            name: t('Recommended tools'),
            free: <CheckOutlined className={styles.rightIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '8',
            name: t('Release bid'),
            free: <CheckOutlined className={styles.rightIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '9',
            name: t('Participate in bidding'),
            free: <CheckOutlined className={styles.rightIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '10',
            name: t('Get bidding leads push'),
            free: <MinusOutlined className={styles.outLinedIcon}/>,
            starter: <MinusOutlined className={styles.outLinedIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '11',
            name: t('Home page recommendation'),
            free: <MinusOutlined className={styles.outLinedIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '12',
            name: t('Market clues'),
            free: <MinusOutlined className={styles.outLinedIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '13',
            name: t('Data Insights'),
            free: <MinusOutlined className={styles.outLinedIcon}/>,
            starter: <MinusOutlined className={styles.outLinedIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '14',
            name: t('Improve ranking'),
            free: <MinusOutlined className={styles.outLinedIcon}/>,
            starter: <MinusOutlined className={styles.outLinedIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
        {
            key: '15',
            name: t('24-hour customer service'),
            free: <MinusOutlined className={styles.outLinedIcon}/>,
            starter: <CheckOutlined className={styles.rightIcon}/>,
            pro: <CheckOutlined className={styles.rightIcon}/>,
        },
    
    
    ];
    
    const columns = [
        {
            title: '',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: t('Free Version'),
            dataIndex: 'free',
            key: 'free',
            align: 'center',
        },
        {
            title: t('Basic Edition'),
            dataIndex: 'starter',
            key: 'starter',
            align: 'center',
        },
        {
            title: t('Premium'),
            dataIndex: 'pro',
            key: 'pro',
            align: 'center',
        },
    ];
    
    return (
        <div >
            <img style={{width:'100%'}} src='/img/Member.jpg' alt=''/>
            <Row className={styles.descCardRow}>
                <Col span={8}>
                    <Card bordered={false} className={styles.descCard} >
                        {state.companyInof.vip_level === 0 ? (
                            <Badge.Ribbon text={t('Current level')} color="magenta">
                                <p className={styles.cardTitle}>{t('Free Version')}</p>
                            </Badge.Ribbon>
                            ) : <p className={styles.cardTitle}>{t('Free Version')}</p>
                        }
                        <Divider />
                        <p>{t("Create your listing on the industry's largest marketplace for buying and selling web services.")}</p>
                        <p className={styles.featureSpan}>{t('Permissions')}</p>
                        <p>
                            {t('Standard Service Provider Profile with the ability to upload all connected data centers in your network (unlimited number of data centers). Access the marketplace and basic team management. Add your company logo and information to your profile. Add and update your Point of Presence and Data Center assets. Add all services and locations in your portfolio to help customers find you.')}
                        </p>
                    </Card>
                </Col>
                <Col span={8} className={styles.descCardCenter}>
                    <Card  bordered={false} className={`${styles.descCard}`}>
                        {state.companyInof.vip_level === 10 ? (
                            <Badge.Ribbon text={t('Current level')} color="magenta">
                                <p className={styles.cardTitle}>{t('Basic Edition')}</p>
                            </Badge.Ribbon>
                        ) : <p className={styles.cardTitle}>{t('Basic Edition')}</p>
                        }
                        <Divider/>
                        <p>{t('Build your profile, increase exposure and generate interest in your services.')}</p>
                        <p className={styles.featureSpan}>{t('Permissions')}</p>
                        <p><span style={{color: '#333'}}>{t('Includes all content for free, plus')}：</span></p>

                        <p>
                           {t('Customizable profiles that give you more control over your brand identity and positioning. Receive up to $1,000 in boost credits when you sign up to improve your ranking on product pages. Improve search relevance on product pages for the services/locations you offer. Option to run review campaigns to showcase positive customer feedback and foster trust in your business. Basic analytics on user activity.')}
                        </p>

                        <Button type="primary" className={styles.orderBtn}>{t('Customized Membership')} ￥2000</Button>
                    </Card>
                </Col>
                <Col span={8} className={styles.descCardRight}>
                    <Card bordered={false} className={styles.descCard}>
                        {state.companyInof.vip_level === 20 ? (
                            <Badge.Ribbon text={t('Current level')} color="magenta">
                                <p className={styles.cardTitle}>{t('Professional Edition')}</p>
                            </Badge.Ribbon>
                        ) : <p className={styles.cardTitle}>{t('Professional Edition')}</p>
                        }
                        <Divider/>
                        <p>{t('Enhance your brand.')}</p>
                        <p className={styles.featureSpan}>{t('Permissions')}</p>
                        <p><span style={{color: '#333'}}>{t('In addition to the free version and basic version, there are')}：</span></p>
                        <p>
                          {t('Upon registration, you can get up to 20 guaranteed leads through the platform. Up to $5,000 in boost credits when you sign up to improve your ranking on your product pages. Advanced search relevance on your product pages for the services/locations you offer. The platform team recommends your services to relevant buyers (only where applicable). Engagement tracking allows you to identify potential customers and understand what services people are looking for.')}
                        </p>
                        <Button type="primary" className={styles.orderBtn}>{t('Customized Membership')} ￥4000</Button>
                    </Card>
                </Col>
            </Row>

            <Row className={`${styles.descCardRow}`}>
                <Col className= {styles.descTitle}>
                    {t('Membership Benefits')}
                </Col>
            </Row>
            <Row className={styles.descCardRow}>
                <Col  style={{marginTop:'.5rem',marginBottom:'.5rem',width:'100%'}}>
                    <Table dataSource={dataSource} columns={columns}  pagination={false}/>
                </Col>
            </Row>
        </div>
    );
};

export default Member;
